<template>
  <div class="content">
    <div class="headerstop">
      <div class="headetop">
        <div class="name">媒介类型</div>
        <el-radio v-model="radio" label="1">全部</el-radio>
        <el-radio v-model="radio" label="2">电视</el-radio>
        <el-radio v-model="radio" label="3">电台</el-radio>
        <el-radio v-model="radio" label="4">网站</el-radio>
        <el-radio v-model="radio" label="5">手机</el-radio>
      </div>
      <div class="headetop">
        <div class="name">资源状态</div>
        <el-radio v-model="radio" label="1">全部</el-radio>
        <el-radio v-model="radio" label="2">执行中</el-radio>
        <el-radio v-model="radio" label="3">已到期</el-radio>
      </div>
      <div class="headetop">
        <div class="name">
到期时间</div>
        <el-radio v-model="radio" label="1">全部</el-radio>
        <el-radio v-model="radio" label="2">近一周</el-radio>
        <el-radio v-model="radio" label="3">近两周</el-radio>
        <el-radio v-model="radio" label="4">近一个月</el-radio>
        <el-radio v-model="radio" label="5">近三个月</el-radio>
      </div>
    </div>
    <div class="listwarp">
       <el-table
    :data="list"
     :cell-style="$rowstyle"
        :header-cell-style="$headerstyle"
    border
    style="width: 100%">
    <el-table-column
      label="序号"
      type="index"
      align="center"
      width="50">
    </el-table-column>
    <el-table-column
      prop="name"
      label="媒介"
      align="center"
      width="100">
    </el-table-column>
     <el-table-column
      prop="name"
      label="频道"
      align="center"
      width="139">
    </el-table-column>
     <el-table-column
      prop="name"
      label="广告类型"
      align="center"
      width="150">
    </el-table-column>
     <el-table-column
      prop="name"
      label="广告位置"
      align="center"
      width="150">
    </el-table-column>
     <el-table-column
      prop="name"
      label="节目位置"
      align="center"
      width="150">
    </el-table-column>
     <el-table-column
      prop="name"
      label="当前客户名称"
      align="center"
      width="150">
    </el-table-column>
<el-table-column
      prop="name"
      label="到期时间"
      align="center"
      width="150">
    </el-table-column>
   
    <el-table-column
      label="状态"
      align="center"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">执行中</el-button>
      </template>
    </el-table-column>
  </el-table>
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-size="100"
      layout="total, prev, pager, next"
      :total="1000">
    </el-pagination>
  </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage1:1,
      radio: "1",
      list: [
        { name: "xxxx" },
        { name: "xxxx" },
        { name: "xxxx" },
        { name: "xxxx" },
        { name: "xxxx" }
      ]
    };
  },
  methods: {
    handleSizeChange(){

    },
    handleCurrentChange(){

    }
  },
};
</script>
<style lang="scss" scoped>
.headerstop {
  width: 97%;
  margin: 0 auto;
  .headetop {
    display: flex;
    margin-top: 20px;
    align-items: center;
    flex-direction: row;
    .name {
      width: 120px;
    }
  }
}
.listwarp{
  width: 94%;
  margin: 0 auto;
  margin-top: 30px;
}
</style>